import React, {useState, useEffect} from 'react';
import './index.css'
const Count = () => {
  const [value, setValue] = useState(0)

  const increment = e => {
    setTimeout(() => {
      // 状态依赖与原状态, 使用回调更新状态
      // setValue(prevState => prevState + 1)
      // 不依赖与原状态, 使用变更对象更新
      setValue(value + 1)
    }, 100)
  }

  useEffect(() => {
    const intervalToken = setInterval(() => {
      console.log('tick: ', Date.now())
    }, 1000)
    return () => {
      clearInterval(intervalToken)
    }
  }, []); // 传[] 副作用相当于挂载和卸载, 不传[] 副作用相当于更新和更新完成

  //
  return (
    <div className="count">
      <h2>Count: {value}</h2>
      <button onClick={increment}>+</button>
    </div>
  );
};

export default Count;